<template>
  <div class="wrap">
    <div class="header">
      <div>
        <div>
          <el-select v-model="queryParams.type" placeholder="请选择" @change="changeOption">
            <el-option :value="0" :label="$t('common.全部类型')"></el-option>
            <el-option :value="1" :label="$t('shipment.oneStock')"></el-option>
            <el-option :value="2" :label="$t('shipment.middleWarehouse')"></el-option>
          </el-select>

          <el-select v-model="queryParams.labelStatus" placeholder="请选择" class="mgl20" @change="changeOption">
            <el-option value="" :label="$t('common.全部类型')"></el-option>
            <el-option :value="0" :label="$t('shipment.无需贴标')"></el-option>
            <el-option :value="1" :label="$t('labelOrder.待确认')"></el-option>
            <el-option :value="2" :label="$t('labelOrder.待贴标')"></el-option>
            <el-option :value="3" :label="$t('labelOrder.已贴标')"></el-option>
          </el-select>
        </div>
      </div>




    </div>
    <div class="content mgt20">
      <el-tabs v-model="queryParams.status" @tab-click="changeOption">
        <el-tab-pane :label="`${$t('transfer.待确认')}(${attrNumber(tabTypeNum.waitConfirmNum)})`" name="0"></el-tab-pane>
        <el-tab-pane :label="`${$t('transfer.待调货')}(${attrNumber(tabTypeNum.waitTransferNum)})`" name="1"></el-tab-pane>
        <el-tab-pane :label="`${$t('transfer.已调货')}(${attrNumber(tabTypeNum.finishNum)})`" name="2"></el-tab-pane>
      </el-tabs>

      <div class="table">
        <el-table
          border
          :data="tableData"
          v-tableHeight="{bottomOffset: 80}"
          height="100px"
          ref="tableData"
        >
          <el-table-column
            :label="$t('table.调货单号')"
            prop="workNo"
            align="center"
            min-width="250"
            show-overflow-tooltip
            fixed
          >
            <template slot-scope="{row}">
              <diy-link @click="jumpTransferInfo(row.id)">{{row.workNo}}</diy-link>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.store')"
            prop="accountName"
            align="center"
            width="150"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.箱子数量')"
            prop="boxNum"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            :label="$t('table.调货SKU种数')"
            prop="exSkuNum"
            align="center"
            min-width="150"
          >
            <template v-slot="{row}">
              <template v-if="row.status === 2">
                <div-num
                  :ex-num="row.exSkuNum"
                  :rl-num="row.rlSkuNum"
                ></div-num>
              </template>
              <template v-else>
                {{row.exSkuNum}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.调货商品总数')"
            prop="exGoodsNum"
            align="center"
            min-width="150"
          >
            <template v-slot="{row}">
              <template v-if="row.status === 2">
                <div-num
                  :ex-num="row.exGoodsNum"
                  :rl-num="row.rlGoodsNum"
                ></div-num>
              </template>
              <template v-else>
                {{row.exGoodsNum}}
              </template>
            </template>
          </el-table-column>
          <template v-if="queryParams.status === '2'">
            <el-table-column
              :label="$t('table.实际总费用（元）')"
              prop="rlTotalFee"
              align="center"
              min-width="150"
            >
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :label="$t('table.预计总费用（元）')"
              prop="exTotalFee"
              align="center"
              min-width="150"
            >
            </el-table-column>

          </template>
          <el-table-column
            :label="$t('table.调货类型')"
            prop="type"
            align="center"
            width="100"
          >
            <template v-slot="{row}">
              {{getTransferTypeStr(row.type)}}
            </template>
          </el-table-column>


          <el-table-column
            :label="$t('table.贴标状态')"
            prop="labelStatus"
            align="center"
            width="100"
          >
            <template v-slot="{row}">
              {{getMiddleLabelStatusStr(row)}}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.createTime2')"
            prop="createTime"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.完成时间')"
            prop="finishTime"
            align="center"
            width="150"
          >
            <template v-slot="{row}">
              {{row.finishTime || '-'}}
            </template>
          </el-table-column>
   <el-table-column
                  label="操作员"
                  prop="userAccount"
                  align="center"
                  min-width="150"
                >
                  <template v-slot="{row}">
                    <template v-if="row.child_name">
                       {{row.child_name}}
                    </template>
                    <template v-else>
                       {{row.userAccount}}
                    </template>

                  </template>
                </el-table-column>
          <el-table-column
            :label="$t('table.operate')"
            prop="operate"
            align="left"
            width="300"
            fixed="right"
          >
            <template v-slot="{row}">
              <el-button type="view" @click="jumpTransferInfo(row.id)">{{$t('common.view')}}</el-button>
              <template v-if="row.labelOrder">
                <el-button type="primary" @click="jumpLabelOrderInfo(row.labelOrder.id,true)">{{ $t('labelOrder.贴标工单') }}</el-button>
              </template>
              <template v-if="row.status <= 1 || (!row.labelOrder || row.labelOrder.status !== 2)">
                <delete-button :id="row.id" @deleteWork="getData"></delete-button>
              </template>

            </template>
          </el-table-column>



        </el-table>

        <div class="mgt10 font-grey" style="font-size: 13px" v-if="queryParams.status === '0'">
          {{$t('middle.以上工单均需要您先确认好对应的“贴标工单”后，才会显示在仓库后台并交由仓管人员处理')}}
        </div>

        <div class="page-wrap mgt10">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :current-page.sync="queryParams.page"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="getData"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {deleteMiddleWorkOrder, getMiddleWorkOrderList} from "@/api/middleWork";
import {attrNumber} from "@/utils/common";
import {jumpLabelOrderInfo, jumpMiddleInfo, jumpTransferInfo} from "@/utils/jumpView";
import {deleteShipment} from "@/api/shipment";
import CancelButton from "@/views/middleWork/components/CancelButton.vue";
import ReturnCancelButton from "@/views/middleWork/components/ReturnCancelButton.vue";
import DeleteButton from "@/views/transferWork/components/DeleteButton.vue";
import {getTransferWorkList} from "@/api/transferWork";
import {getMiddleLabelStatusStr} from "../../utils/MiddleWork";
import {getTransferTypeStr} from "../../utils/transferWork";
import DivNum from "@/views/middleWork/components/DivNum.vue";

export default {
  name: "transferList",
  components: {DivNum, DeleteButton},
  data(){
    return {
      loading: false,
      delLoading: false,
      tableData: [],
      queryParams: {
        page: 1,
        pageSize: 20,
        status: '0',
        labelStatus: '',
        type: 0,
      },
      total: 0,
      tabTypeNum: {
        waitConfirmNum: 0,
        waitTransferNum: 0,
        finishNum: 0,
      },
    }
  },
  created() {
    this.getData()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods:{
    getTransferTypeStr,
    getMiddleLabelStatusStr,
    jumpTransferInfo,
    jumpLabelOrderInfo,
    attrNumber,
    getData(){
      this.loading = true
      getTransferWorkList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.total = res.info.total

          this.tabTypeNum.waitConfirmNum = res.info.waitConfirmNum
          this.tabTypeNum.waitTransferNum = res.info.waitTransferNum
          this.tabTypeNum.finishNum = res.info.finishNum

        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData();
    },
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 20px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 0px 0 0;
  }

}
</style>
